<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爆料管理</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/all.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/bootstrap-4.css" rel="stylesheet">
</head>
<body>
    <div id="releaseApp" class="container-fluid p-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">爆料管理</h5>
                <div class="d-flex gap-3 align-items-center">
                    <!-- 添加爆料按钮 -->
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addReleaseModal">
                        <i class="fas fa-plus"></i> 添加爆料
                    </button>
                    <!-- 模板筛选 -->
                    <select class="form-select" v-model="filter.templateId" style="width: auto;">
                        <option value="">全部模板</option>
                        <option v-for="template in templates" 
                                :key="template.id" 
                                :value="template.id">
                            {{ template.name }}
                        </option>
                    </select>
                    <!-- 状态筛选 -->
                    <div class="btn-group">
                        <button type="button" 
                                class="btn btn-outline-secondary" 
                                :class="{ active: filter.status === status.value }"
                                v-for="status in statusOptions"
                                :key="status.value"
                                @click="filter.status = status.value">
                            {{ status.label }}
                        </button>
                    </div>
                    <!-- 批量操作按钮 -->
                    <div class="btn-group" v-if="selectedItems.length">
                        <button class="btn btn-danger" @click="handleBatchDelete">
                            <i class="fas fa-trash"></i> 删除选中({{ selectedItems.length }})
                        </button>
                        <button class="btn btn-warning" @click="handleBatchReset">
                            <i class="fas fa-redo"></i> 重置选中({{ selectedItems.length }})
                        </button>
                    </div>
                </div>
            </div>

            <!-- 统计信息 -->
            <div class="card-body border-bottom bg-light py-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                   
                    <div class="d-flex gap-2">
                        <div class="badge bg-secondary p-2">
                            <small>未使用: {{ statistics.status_0 || 0 }}</small>
                        </div>
                        <div class="badge bg-primary p-2">
                            <small>占用中: {{ statistics.status_1 || 0 }}</small>
                        </div>
                        <div class="badge bg-warning p-2">
                            <small>待审核: {{ statistics.status_2 || 0 }}</small>
                        </div>
                        <div class="badge bg-success p-2">
                            <small>已通过: {{ statistics.status_3 || 0 }}</small>
                        </div>
                        <div class="badge bg-danger p-2">
                            <small>已拒绝: {{ statistics.status_4 || 0 }}</small>
                        </div>
                        <div class="badge bg-dark p-2">
                            <small>异常: {{ statistics.status_5 || 0 }}</small>
                        </div>
                        <div class="badge bg-info p-2">
                            <small>总数: {{ statistics.total }}</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据表格 -->
            <div class="card-body table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>
                                <div class="form-check">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           v-model="selectAll"
                                           @change="handleSelectAll">
                                </div>
                            </th>
                            <th width="80">ID</th>
                            <th width="210">创建时间</th>
                            <th width="200">爆料内容</th>
                            <th>模板</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in releaseList" :key="item.id">
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           :value="item.id"
                                           v-model="selectedItems">
                                </div>
                            </td>
                            <td width="80">{{ item.id }}</td>
                            <td width="210">{{ item.create_time }}</td>
                            <td width="200">{{ item.data.length > 30 ? item.data.substring(0,30) + '...' : item.data }}</td>
                            <td>{{ item.template_name }}</td>
                            <td>
                                <div class="position-relative d-inline-block">
                                    <span class="badge opacity-75" :class="getStatusClass(item.status)">
                                        {{ getStatusText(item.status) }}
                                    </span>
                                    <span v-if="item.status === '1'" 
                                          class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary opacity-75" 
                                          style="font-size: 0.65em; margin-left: -5px;">
                                        {{ getOccupyTime(item.call_time) }}
                                    </span>
                                    <span v-if="item.status === '1' || item.status === '2'" 
                                          class="position-absolute bottom-0 start-100 translate-middle-x badge rounded-pill bg-dark opacity-75" 
                                          style="font-size: 0.65em; margin-left: 3px; margin-bottom: -5px;">
                                        ID:{{ item.user_id }}
                                    </span>
                                </div>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-danger" @click="handleDelete(item)">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 添加爆料弹窗 -->
        <div class="modal fade" id="addReleaseModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">添加爆料</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label class="form-label">选择模板</label>
                                <select class="form-select" v-model="form.templateId">
                                    <option value="">请选择模板</option>
                                    <option v-for="tpl in templates" :key="tpl.id" :value="tpl.id">
                                        {{ tpl.name }}
                                    </option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">爆料内容</label>
                                <textarea class="form-control" rows="10" 
                                    v-model="form.content"
                                    placeholder="请输入爆料内容，每行一条数据"></textarea>
                            </div>
                        </form>
                        
                        <!-- 上传进度 -->
                        <div class="progress mt-3" v-if="uploading">
                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                :style="{ width: uploadProgress + '%' }">
                                {{ currentUploadIndex }}/{{ totalUploadCount }}
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" 
                            @click="submitData" 
                            :disabled="uploading">
                            确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/lib/bootstrap.bundle.min.js"></script>
    <script src="../js/lib/vue.min.js"></script>
    <script src="../js/lib/sweetalert2.min.js"></script>
    <script src="../js/pages/release.js"></script>
</body>
</html> 